<template>
  <div>
    <van-popup v-model="show">
      <img :src="d_img" style="height:300px;width:300px" alt />
    </van-popup>
    <div class="top_box">
      <van-uploader :after-read="afterRead" v-if="!img_tou" />
      <div class="img_box" v-else ref="imageWrapper">
        <van-image width="300" height="300" :src="img_tou" />
        <van-image class="kozhao" :style="ko_zhao" :width="w" :height="w" :src="img" v-if="img" />
      </div>
    </div>
    <div class="kz_box">
      <van-grid :column-num="4">
        <van-grid-item v-for="(item,index) in img_lis" :key="index">
          <van-image :src="item" @click="changeImg(item)" />
        </van-grid-item>
      </van-grid>
    </div>
    <div class="hk_box">
      <p>大小：</p>
      <van-slider v-model="w_h" @change="changeWAH" />
      <p>上下：</p>
      <van-slider v-model="up_down" @change="changeUAD" />
      <p>左右：</p>
      <van-slider v-model="left_right" @change="changeLAR" />
      <p>角度：</p>
      <van-slider v-model="jao" @change="changeJao" />
    </div>
    <div class="bth_box">
      <van-button plain type="primary" size="mini" @click="toImage">保存</van-button>
    </div>
  </div>
</template>
<script>
import html2canvas from "html2canvas";
export default {
  name: "",

  data() {
    return {
      img_tou: "",
      value: 0,
      left_right: 50,
      up_down: 50,
      w_h: 10,
      w: 30,
      h: 30,
      jao: 0,
      show: false,
      img_lis: [
        require("@/assets/img/1.png"),
        require("@/assets/img/2.png"),
        require("@/assets/img/3.png"),
        require("@/assets/img/4.png")
      ],
      img: "",
      d_img: "",
      ko_zhao: {
        bottom: "150px",
        left: "150px",
        transform: "rotate(0deg)"
      }
    };
  },

  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file.content);

      this.img_tou = file.content;
    },
    onChange(value) {
      Toast("当前值：" + value);
    },
    changeLAR(value) {
      console.log(value);
      let s = 3;
      this.ko_zhao.left = value * s + "px";
    },
    changeUAD(value) {
      console.log(value);
      let s = 3;
      this.ko_zhao.bottom = value * s + "px";
    },
    changeWAH(value) {
      console.log(value);
      let s = 3;
      this.w = this.h = value * 3;
    },
    changeJao(value) {
      console.log(value);
      let s = 3.6;
      let num = value * s;
      this.ko_zhao.transform = "rotate(" + num + "deg)";
    },
    changeImg(img) {
      this.img = img;
      console.log(img);
    },
    toImage() {
      html2canvas(this.$refs.imageWrapper).then(canvas => {
        let dataURL = canvas.toDataURL("image/png");
        console.log(dataURL);

        this.d_img = dataURL;
        this.show = true;
      });
    }
  }
};
</script>
<style lang="less">
.top_box {
  height: 300px;
  background: rgba(red, green, blue, 0.5);
  display: flex; //flex布局
  justify-content: center; //x轴排列
  align-items: center; //y轴排列
  .img_box {
    width: 300px;
    height: 300px;
    position: relative;
    .kozhao {
      position: absolute;
      bottom: 0;
      left: 50%;
    }
  }
}
.hk_box {
  font-size: 20px;
  font-weight: 600;
  padding: 0 20px;
  > p {
    margin: 10px;
  }
}
.bth_box {
  text-align: right;
  padding: 10px;
}
</style>
